12 Exos TP HTML

L’objectif de ce TP est de créer un site web contenant des articles de vulgarisation scientifique. On pourra utiliser le logiciel Notepad++ pour éditer les fichiers .html et .css et un navigateur Firefox ou Google Chrome pour visualiser les fichiers .html.

Partie 1 : Le contenu⚓︎

Exercice 1⚓︎

Créer un dossier intitulé projet, puis, à l’interieur, les fichiers index.html (ce sera la page d'accueil du site), style.css et un dossier Images.

Exercice 2⚓︎

Compléter votre fichier index.html au minimum pour que votre navigateur comprenne que c’est une page HTML et qu’il y ait un titre.

Structure modèle :

HTML

<!DOCTYPE HTML>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon premier document</title>
  </head>
  <body>
    <h1>Titre de mon document</h1>
    <!-- Ceci est un commentaire -->
    <p>
      Regarde maman, je suis sais coder en HTML !
    </p>
  </body>
</html>

Exercice 3⚓︎

Toujours dans le fichier index.html, créer un menu (balise <nav>, voir exemple) sous forme d’une liste de liens vers trois fichiers HTML (« Accueil », « Article 1 » et « Article 2 »). On pourra créer ces fichiers plus tard dans le TD.

Exercice 4⚓︎

Pour la partie principale du corps de votre page, créer une division autre que nav (à laquelle on pourra attribuer une mise en forme spécifique plus tard).

Dans cette partie, ajouter une section (balise <section>) contenant un extrait d’un des articles (balise <article>) et un lien pour consulter l’article entier (« En savoir plus »). Cet article se trouve, lui aussi, dans un fichier HTML.

Exercice 5⚓︎

Ajouter dans votre menu de navigation, une image et une adresse email de contact.

Exercice 6⚓︎

Créer dans votre dossier projet les pages des articles. Chaque article contiendra un titre, une image illustrative et le texte. Ces pages contiendront le menu de la page d’accueil.

Exercice 7⚓︎

Prévoir une division pour créer une barre latérale, à droite de la page, contenant la liste de tous les articles. Chaque lien doit renvoyer vers l’article correspondant.

Sans mise en forme, uniquement avec le code html, le site doit être lisible...

Partie 2 : La mise en forme⚓︎

A faire dans la fiche 12 - Exos - TP CSS.